<template>
  <div>
    <div class="b_table">
      <div style="display: flex; align-items: center; justify-content: space-between; height: 60px">
        <div> </div>
        <div style="position: relative; bottom: 10px">
          <a-button type="primary"> 新增账号 </a-button>
        </div>
      </div>
      <a-table
        style="position: relative; bottom: 5px"
        ellipsis
        :loading="loading"
        bordered
        size="middle"
        class="ant-table-striped"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        :data-source="data.data"
        :columns="columns"
        stripe
        @change="Change"
      >
        <!-- headerCell个性化单元头,表的头 -->
        <template #headerCell="{ column }">
          <!-- 限制只有name才能是蓝色 -->
          <template v-if="column.key === 'user_id'">
            <span style="color: #1890ff">user_id</span>
          </template>
        </template>
        <!-- 搜索 -->

        <!-- 个性化单元格，数据 -->
        <template #bodyCell="{ text, column }">
          <template v-if="state.searchText && state.searchedColumn === column.dataIndex">
            <span>
              <template
                v-for="(fragment, i) in text
                  .toString()
                  .split(new RegExp(`(?<=${state.searchText})|(?=${state.searchText})`, 'i'))"
              >
                <mark
                  v-if="fragment.toLowerCase() === state.searchText.toLowerCase()"
                  :key="i"
                  class="highlight"
                >
                  {{ fragment }}
                </mark>
                <template v-else>{{ fragment }}</template>
              </template>
            </span>
          </template>
          <template v-else-if="column.dataIndex === 'roles'">
            <div class="editable-row-operations">
              <a-tag color="#108ee9" v-for="(item, index) in text" :key="index">
                <span v-if="item == 'OTHER'">开发者</span>
                <span v-if="item == 'ADMIN'">超级管理</span>
                <span v-if="item == 'MEMBER'">普通用户</span>
                <span v-if="item == 'MERCHANT'">普通商家</span>
              </a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'caozuo'">
            <div style="display: flex; justify-content: space-around">
              <el-icon @click="DataEdit(text)" color="#0960bd"><Edit /></el-icon>
              <el-icon color="red"><Delete /></el-icon>
            </div>
          </template>
        </template>
        <!-- 这个是二级table -->
        <!-- <template #expandedRowRender="{ record }">
          <p style="margin: 0">
            {{ record.nickName }}
          </p>
        </template> -->
      </a-table>
    </div></div
  >
</template>
<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import { AStore } from './components/data';

  const loading = ref(true);

  async function getData() {
    const result = await AStore.Getoperation({
      pageNum: data.value.pageNum,
      pageSize: data.value.pageSize,
    });
    data.value.data = result.data;
    loading.value = false;
    // console.log(result);
  }
  const searchInput = ref();

  const state = reactive({
    searchText: '',
    searchedColumn: '',
  });

  const Change = (pagination: any) => {
    console.log(pagination);
  };

  const DataEdit = (item) => {
    console.log(item);
  };
  const data = ref({
    data: [],
    loading: true,
    border: true,
    rolesList: [],
    total: 0,
    pageNum: 1,
    pageSize: 20,
  });

  const columns = [
    {
      title: '用户ID',
      dataIndex: 'user_id',
      key: 'user_id',

      // 开启搜索
      customFilterDropdown: true,
      // 搜索过滤
      onFilter: (value, record) =>
        record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
      onFilterDropdownOpenChange: (visible) => {
        if (visible) {
          setTimeout(() => {
            searchInput.value.focus();
          }, 100);
        }
      },
    },
    {
      title: 'IP地址',
      dataIndex: 'visit_ip',
      key: 'visit_ip',
    },

    {
      title: '请求地址',
      dataIndex: 'visit_path',
      key: 'visit_path',
    },
    {
      title: '请求参数',
      dataIndex: 'visit_param',
      key: 'visit_param',

      // record.user_id.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '端',
      dataIndex: 'visit_type',
      key: 'visit_type',
    },
    {
      title: '时间点',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '操作',
      dataIndex: 'user_id',
      key: 'caozuo',
      width: 100,
      fixed: 'right',
    },
  ];

  onMounted(() => {
    getData();
  });
</script>

<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>
<style scoped>
  [data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }

  [data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
    background-color: rgb(29 29 29);
  }

  .highlight {
    padding: 0;
    background-color: rgb(255 192 105);
  }

  .b_table {
    margin: 20px;
    padding: 10px;

    /* margin: 20px; */
    background: white;
  }

  .header {
    width: 97%;
    height: 60px;
    margin: 20px;
    background-color: white;
  }
</style>
